<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>
    <script src="../node_modules/prop-types/prop-types.js"></script>
  </head>
  <body>
    <div id="reactDom"></div>
    <script type="text/babel">
      // 之前的数据都是存在组件内部
      // 如果我想渲染外部传递进来props的数据怎么办?

      let MyCom = (props) => {
        return (
          <div>
            我是子组件
            {props.arr.map((v, i) => {
              return <p key={i}>{v}</p>;
            })}
          </div>
        );
      };
      let dataArr = ["寒冰", "盖伦", "蛮王"];
      let Com = () => {
        return (
          <div>
            我是父组件
            <MyCom arr={dataArr} />
          </div>
        );
      };

      ReactDOM.render(
        <Com name="我是name的数据" />,
        document.getElementById("reactDom")
      );
    </script>
  </body>
</html>
